<template>
	<div class="return-chart-box">
		<div id="returnChart"></div>
	</div>
</template>

<script setup>
import { ref, reactive } from "vue";
import echarts from "@/common/utils/echarts.js";
import { jyys_month } from "../service";
import { changeNumToWan } from "../../utils/handelScreen";

// 季度
let timeArr = ref([]);
//计划数据
let dataArr1 = ref([]);
// 实际数据
let dataArr2 = ref([]);

let options = reactive({
	legend: {
		// 图例组件
		left: "20%",
		textStyle: {
			color: "#D3E3FF",
		},
		data: [
			{
				name: "计划",
				icon: "circle",
				itemStyle: {
					color: "#36E3E3",
				},
			},
			{
				name: "实际",
				icon: "circle",
				itemStyle: {
					color: "#28A0E9",
				},
			},
		],
	},
	grid: {
		right: "15%",
		bottom: "10%",
	},
	tooltip: {
		trigger: "axis",
		axisPointer: {
			type: "shadow",
		},
		className: "tooltipBox",
		backgroundColor: "transparent",
		textStyle: {
			color: "#ffffff",
			textShadowColor: "#000000",
			textShadowOffsetY: 2,
			textShadowBlur: 4,
		},
		padding: [0, 15, 30, 15],
		borderWidth: 0,
		formatter: (params) => {
			let res = "";
			for (let i = 0; i < params.length; i++) {
				res += `<br />
				<span>${params[i].seriesName}：</span>
				<span style="color:#FFDA3A">${params[i].value}</span>`;
			}
			return res;
		},
	},
	xAxis: {
		type: "category",
		data: timeArr.value,
		name: "单位（季）",
		nameTextStyle: {
			color: "#D3E3FF",
		},
		axisTick: {
			show: false,
		},
		axisLine: {
			show: false,
		},
		axisLabel: {
			color: "#D3E3FF",
			interval: 0,
		},
	},
	yAxis: [
		{
			type: "value",
			name: "单位（万元）",
			nameTextStyle: {
				color: "#D3E3FF",
			},
			axisLabel: {
				color: "rgba(216,240,255,0.6)",
			},
			splitLine: {
				lineStyle: {
					color: "rgba(176,215,255,0.25)",
				},
			},
		},
	],
	series: [
		{
			type: "line",
			name: "计划",
			smooth: true,
			data: dataArr1.value,
			showSymbol: false,
			lineStyle: {
				color: "#36E3E3",
			},
			areaStyle: {
				color: "rgba(0,213,255,0.2)",
			},
		},
		{
			type: "line",
			name: "实际",
			smooth: true,
			data: dataArr2.value,
			showSymbol: false,
			lineStyle: {
				color: "#28A0E9",
			},
			areaStyle: {
				color: "rgba(0,213,255,0.2)",
			},
		},
	],
});

let countReturnRef = null;
let initReturnChartData = (params) => {
	jyys_month(params).then((resp = []) => {
		const arr1 = [1, 2, 3, 4],
			arr2 = new Array(4).fill("0.00"),
			arr3 = new Array(4).fill("0.00");
		resp.map((item) => {
			const { budget = 0, quarter, practical = 0 } = item;
			arr2[quarter - 1] = changeNumToWan(budget);
			arr3[quarter - 1] = changeNumToWan(practical);
			// arr1.push(quarter);
			// arr2.push(changeNumToWan(budget));
			// arr3.push(changeNumToWan(practical));
		});
		timeArr.value.splice(0);
		timeArr.value.push(...arr1);

		dataArr1.value.splice(0);
		dataArr1.value.push(...arr2);

		dataArr2.value.splice(0);
		dataArr2.value.push(...arr3);

		countReturnRef.setOption(options);
	});
};
const initReturnChart = (params) => {
	if (countReturnRef == null)
		countReturnRef = echarts.init(document.getElementById("returnChart"));
	initReturnChartData(params);
};
defineExpose({
	initReturnChart,
});
</script>
<style lang="scss" scoped>
.return-chart-box {
	width: 100%;
	height: 100%;
	#returnChart {
		width: 100%;
		height: 100%;
	}
}
:deep(.tooltipBox) {
	background: url("@/assets/screenImg/financeImg/tooltipBg.png") no-repeat;
	background-size: 100% 100%;
}
</style>
